<template>
  <el-card class="attr-list">
    <!-- 
      按钮禁用效果：
        三级分类id有值，不禁用
        没有值，需要禁用
     -->
    <el-button type="primary" :icon="Plus" :disabled="!categoryStore.category3Id" @click="showSaveAttr">添加属性</el-button>

    <el-table :data="attrList" border class="attr-table">
      <el-table-column label="序号" type="index" width="60" align="center" />
      <el-table-column label="属性名称" prop="attrName" width="200" />
      <el-table-column label="属性值列表">
        <template v-slot="{ row }">
          <el-tag v-for="attrValue in row.attrValueList" :key="attrValue.id" class="attr-tag">
            {{ attrValue.valueName }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="120">
        <template v-slot="{ row }">
          <el-tooltip content="修改属性" placement="top" effect="light">
            <el-button type="warning" size="small" :icon="Edit" @click="showUpdateAttr(row)" />
          </el-tooltip>
          <el-tooltip content="删除属性" placement="top" effect="light">
            <div class="attr-wrap">
              <el-popconfirm :title="`您确认要删除 ${row.attrName} 属性吗？`" @confirm="removeAttr(row.id)">
                <template #reference>
                  <el-button type="danger" :icon="Delete" size="small" />
                </template>
              </el-popconfirm>
            </div>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "AttrList",
};
</script>

<script lang="ts" setup>
import { watch, ref } from "vue";
import { Plus, Edit, Delete } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { useCategoryStore } from "@/stores/category";
import { getAttrListApi,removeAttrApi } from "@/api/product/attr";
import type { AttrList,SaveAttrItem } from "@/api/product/model/attrModel";



// 声明接受自定义事件
const emit = defineEmits(["setIsShowAttrList", "setAttr"]);

// 属性列表
const attrList = ref<AttrList>([]);

const categoryStore = useCategoryStore();
const getAttrList = async () => {
  const { category1Id, category2Id, category3Id } = categoryStore;

  attrList.value = await getAttrListApi({
    // pinia定义分类id的类型是联合类型：number | undefined
    // 接受参数分类id的类型需要是number
    // 参数类型不符合，就会报错。
    category1Id: category1Id as number,
    category2Id: category2Id as number,
    category3Id: category3Id as number,
  });
};


// 监视categoryStore（整个数据）变化
watch(
  categoryStore,
  (newVal) => {
    // 当三级分类id有值（1. 选中某个值 2. 切换值）
    if (newVal.category3Id) {
      // 发送请求，请求属性列表
      getAttrList();
      return;
    }

    // 三级分类id没有值
    attrList.value = [];
  },
  { immediate: true } // 让添加属性回来，一上来会请求数据
);
// 显示更新组件
const showUpdateAttr = (row: SaveAttrItem) => {
  // 显示SaveOrUpdateAttr组件
  emit("setIsShowAttrList", false);
  emit("setAttr", row);
};
// 显示添加组件
const showSaveAttr = () => {
  emit("setIsShowAttrList", false);
  emit("setAttr", {
    attrName: "",
    attrValueList: [],
  });
};
// 删除属性
const removeAttr = async (id: number) => {
  await removeAttrApi(id);
  ElMessage.success("删除属性成功");
  getAttrList();
};
</script>

<style scoped>
.attr-list {
  margin-top: 20px;
}

.attr-table {
  margin-top: 10px;
}

.attr-tag {
  margin-right: 10px;
}
.attr-wrap {
  display: inline-block;
  margin-left: 10px;
}
</style>
